import React from 'react';
import { Chart } from '@antv/g2';

const data = [
    { ctype: '事例一', value: 40, percent: 0.4 },
    { ctype: '事例二', value: 21, percent: 0.21 },
    { ctype: '事例三', value: 17, percent: 0.17 },
    { ctype: '事例四', value: 13, percent: 0.13 },
    { ctype: '事例五', value: 9, percent: 0.09 },
];
var chart;
class G2PieBsc extends React.Component {
    componentDidMount() {
        this.props.onRef(this);
        this.chartInit();
        this.loadData();
    }
    chartInit = () => {
        chart = new Chart({
            container: this.props.ele,
            autoFit: true,
            height: this.props.height,
        });
        chart.coordinate('theta', {
            radius: 0.75,
        });

        chart.data(data);

        chart.scale('percent', {
            formatter: (val) => {
                val = val * 100 + '%';
                return val;
            },
        });

        chart.tooltip({
            showTitle: false,
            showMarkers: false,
        });

        chart
            .interval()
            .position('percent')
            .color('ctype')
            .label('percent', {
                offset:-20,
                content: (data) => {
                    return `${data.ctype} ${data.value}`;
                },
            })
            .adjust('stack');

        chart.interaction('element-single-selected');
    }
    loadData = () => {
        const { ParentData } = this.props;
        chart.changeData(ParentData);
        chart.render();
    }
    render() {
        return (
            <div id={this.props.ele}></div>
        )
    };
}
export default G2PieBsc;